<template>
    <div class="List">
        <h3 class="list-title">智能手机</h3>
        <div class="list-header">
            <div class="list-ad">
                <router-link to="/">
                    <img src="https://openfile.meizu.com/group1/M00/06/A2/Cgbj0VuiFjeAQu85AADz4RX6mZQ072.jpg" alt="">
                </router-link>
            </div>
        </div>
        <div class="phone-list">
            <div class="phone-content">
                <router-link to="/">
                    <img src="https://openfile.meizu.com/group1/M00/05/E2/Cgbj0FtqgnmAFgJPAAhgnScaoFg724.png" alt="">
                    <div class="info">
                        <p class="products-name">魅族 16th</p>
                        <p class="slogan slogan-sale">
                            <span>
                              <em>热卖</em>
                              骁龙845 屏幕下指纹
                            </span>
                        </p>
                        <p class="price">
                            <i>￥</i>
                            2698 起 
                        </p>
                    </div>
                </router-link>
            </div>
            <div class="phone-content">
                <router-link to="/">
                    <img src="https://openfile.meizu.com/group1/M00/06/C4/Cgbj0FvQPnmABVZHAAM7MXAlUiQ783.png" alt="">
                    <div class="info">
                        <p class="products-name">魅族 16th</p>
                        <p class="slogan slogan-sale">
                            <span>
                              <em>热卖</em>
                              骁龙845 屏幕下指纹
                            </span>
                        </p>
                        <p class="price">
                            <i>￥</i>
                            2698 起 
                        </p>
                    </div>
                </router-link>
            </div>
            <div class="phone-content">
                <router-link to="/">
                    <img src="https://openfile.meizu.com/group1/M00/06/A9/Cgbj0FusSK2AQZgiAAlFKHoO-co889.png" alt="">
                    <div class="info">
                        <p class="products-name">魅族 16th</p>
                        <p class="slogan slogan-sale">
                            <span>
                              <em>热卖</em>
                              骁龙845 屏幕下指纹
                            </span>
                        </p>
                        <p class="price">
                            <i>￥</i>
                            2698 起 
                        </p>
                    </div>
                </router-link>
            </div>
            <div class="phone-content">
                <router-link to="/">
                    <img src="https://openfile.meizu.com/group1/M00/06/99/Cgbj0FujMs-AZDb5AA14vDzyhPE669.png" alt="">
                    <div class="info">
                        <p class="products-name">魅族 16th</p>
                        <p class="slogan slogan-sale">
                            <span>
                              <em>热卖</em>
                              骁龙845 屏幕下指纹
                            </span>
                        </p>
                        <p class="price">
                            <i>￥</i>
                            2698 起 
                        </p>
                    </div>
                </router-link>
            </div>
            <div class="phone-content">
                <router-link to="/">
                    <img src="https://openfile.meizu.com/group1/M00/04/0B/Cgbj0FrcblSAGHrPAAvT_qZZSA0427.png" alt="">
                    <div class="info">
                        <p class="products-name">魅族 16th</p>
                        <p class="slogan slogan-sale">
                            <span>
                              <em>热卖</em>
                              骁龙845 屏幕下指纹
                            </span>
                        </p>
                        <p class="price">
                            <i>￥</i>
                            2698 起 
                        </p>
                    </div>
                </router-link>
            </div>
            <div class="phone-content">
                <router-link to="/">
                    <img src="https://openfile.meizu.com/group1/M00/03/BC/Cgbj0Vq9-oeARs_XAALvUdl5qpo302.png" alt="">
                    <div class="info">
                        <p class="products-name">魅族 16th</p>
                        <p class="slogan slogan-sale">
                            <span>
                              <em>热卖</em>
                              骁龙845 屏幕下指纹
                            </span>
                        </p>
                        <p class="price">
                            <i>￥</i>
                            2698 起 
                        </p>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'List'
}
</script>
<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .List
        .list-title
            position: relative
            padding: .44rem 0 .52rem
            font-size: .34rem
            font-weight: 700
            text-align: center
            color: #000
            &:after
                content: ""
                position: absolute
                width: .44rem
                height: .052rem
                left: 50%
                transform: translate(-50%)
                bottom: .3rem
                background: #0BBBEF
        .list-header
            .list-ad
                a
                   display: block 
                   img
                        display: block
                        width: 100%
        .phone-list
            display: flex
            flex-wrap: wrap
            padding: .12rem 0
            justify-content: space-between
            align-items: center
            background: $conBgColor
            .phone-content
                position: relative
                width: 49.2%
                height: 4.34rem
                line-height: .33rem
                padding-top: .23rem
                margin-bottom: .12rem
                text-align: center
                background: $topBgColor
                a
                    img
                        display: block
                        width: 90%
                        margin: 0 auto
                    .info
                        position: absolute
                        width: 100%
                        height: 1.16rem
                        left: 0
                        bottom: 0rem
                        .products-name
                            margin-bottom: .036rem
                            font-size: .25rem
                            color: #333
                            font-weight: 700
                            text-overflow: ellipsis
                            white-space: nowrap
                            overflow: hidden
                        .slogan
                            display: flex
                            justify-content: center
                            align-items: center
                            height: .32rem
                            font-size: .24rem
                            color: #999
                            margin: 0 .12rem
                            margin-bottom: .036rem
                            text-overflow: ellipsis
                            white-space: nowrap
                            overflow: hidden
                            &.slogan-sale
                                span
                                    color: #E82B4B
                                    border: 1px solid #E82B4B
                        .slogan
                            span
                                height: .28rem
                                font-style: normal
                                padding: 0 .092rem
                                overflow: hidden
                                text-overflow: ellipsis
                                white-space: nowrap
                                border: 1px solid transparent
                                em
                                    float: left
                                    padding: 0 .092rem
                                    margin-left: -.092rem
                                    margin-right: .092rem
                                    color: #fff
                                    background-color: #E82B4B
                        .price
                            font-size: .3rem
                            color: #e82b4b

                                



                

</style>


